<template>
  <div class="animated fadeIn">
    <!-- 业务报表 2018/3/7 12:30  -->
    <Row>
      <i-col :span="8">
        <Button type="primary" size="large" @click="exportDataInventory">
          <Icon type="ios-download-outline"></Icon>
          原始数据
        </Button>
      </i-col>

      <i-col :span="16">

        <Form ref="searchForm" :model="searchForm" inline>
          <FormItem prop="mainOrderNo">
            <Input type="text" v-model="searchForm.mainOrderNo" placeholder="联运单号"></Input>
          </FormItem>
          <FormItem prop="productName">
            <Input type="text" v-model="searchForm.productName" placeholder="品名"></Input>
          </FormItem>
          <FormItem prop="containerNoBody">
            <Input type="text" v-model="searchForm.containerNoBody" placeholder="集装箱号"></Input>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSearch(searchForm)">查询</Button>
          </FormItem>
        </Form>
      </i-col>
    </Row>

    <Row>
      <i-col :md="24">

        <div>
          <div style="position:relative;">

            <Table :columns="stationColumn" :data="main_order_list" ref="table2" border></Table>

            <div style="position:absolute;top:0px;width:100%;height:100%;display: flex;
                                      align-items: center;
                                      justify-content: center;background: rgba(210, 216, 222, 0.5);"
                 v-if="list_loadding">
              <Spin size="large"></Spin>
              <h6 style="color:#2d8cf0;margin-top:10px;">正在获取数据...</h6>
            </div>
          </div>

          <Page :total="this.pageTotal" show-total @on-change="setInitPage"
                style="text-align:right;margin-top:50px" show-elevator></Page>
        </div>
      </i-col>
      <i-col :md="12">
      </i-col>
    </Row>
  </div>
</template>
<script>
  import { getOrderLiquidation } from '@api/backEnd/report'
  import { mapGetters } from 'vuex'
  import { exportUtil } from '@/vendor/exportInvoke'

  export default {
    name: 'orderReport',
    data () {
      return {
        searchForm: {
          mainOrderNo: '',
          productName: '',
          containerNoBody: ''
        },
        pageindex: 1,
        pageTotal: null,
        main_order_list: [],
        list_loadding: false,
        stationColumn: [
          {
            title: '联运单号',
            key: 'main_order_no',
            ellipsis: 'false',
            fixed: 'left',
            width: 200
          },
          {
            title: '子单号',
            ellipsis: 'false',
            key: 'order_no',
            width: 200
          },
          {
            title: '货票号',
            ellipsis: 'false',
            key: 'waybill_no',
            width: 100
          },
          {
            title: '箱号字母',
            ellipsis: 'false',
            key: 'container_no_head',
            width: 100
          },
          {
            title: '集装箱号',
            ellipsis: 'false',
            key: 'container_no_body',
            width: 100
          },
          {
            title: '发货人',
            ellipsis: 'false',
            key: 'shipper',
            width: 200
          },
          {
            title: '收货人',
            ellipsis: 'false',
            key: 'receiver',
            width: 200
          },
          {
            title: '货物名称',
            ellipsis: 'false',
            key: 'product_name',
            width: 100
          },
          {
            title: '联运状态',
            ellipsis: 'false',
            width: 130,
            render: (h, params) => {
              const status = parseInt(params.row.status)
              if (status === 1) {
                return h('div', [
                  h('Tag', {
                    props: {
                      type: 'dot',
                      color: 'default'
                    }
                  }, '空车入线')
                ])
              } else if (status === 2) {
                return h('div', [
                  h('Tag', {
                    props: {
                      type: 'dot',
                      color: 'blue'
                    }
                  }, '重车出线')
                ])
              } else if (status === 3) {
                return h('div', [
                  h('Tag', {
                    props: {
                      type: 'dot',
                      color: 'yellow'
                    }
                  }, '待运输')
                ])
              } else if (status === 4) {
                return h('div', [
                  h('Tag', {
                    props: {
                      type: 'dot',
                      color: 'green'
                    }
                  }, '运输中')
                ])
              } else if (status === 5) {
                return h('div', [
                  h('Tag', {
                    props: {
                      type: 'dot',
                      color: '#FF530D'
                    }
                  }, '配送中')
                ])
              } else if (status === 6) {
                return h('div', [
                  h('Tag', {
                    props: {
                      type: 'dot',
                      color: 'red'
                    }
                  }, '运单完成')
                ])
              }
            }
          },
          {
            title: '发站',
            ellipsis: 'false',
            key: 'start_station_name',
            width: 100
          },
          {
            title: '到站',
            ellipsis: 'false',
            key: 'end_station_name',
            width: 100
          },
          {
            title: '发站时间',
            ellipsis: 'false',
            key: 'start_station_time',
            width: 150
          },
          {
            title: '到站时间',
            ellipsis: 'false',
            key: 'end_station_time',
            width: 150
          },
          {
            title: '车皮号',
            ellipsis: 'false',
            key: 'train_number',
            width: 100
          },
          {
            title: '矿发吨数',
            ellipsis: 'false',
            key: 'send_weight',
            width: 100
          },
          {
            title: '车队名称',
            ellipsis: 'false',
            key: 'fleet_name',
            width: 100
          },
          {
            title: '司机名称',
            ellipsis: 'false',
            key: 'driver_name',
            width: 100
          },
          {
            title: '车牌号',
            ellipsis: 'false',
            key: 'truck_plate',
            width: 100
          },
          {
            title: '送货地址',
            ellipsis: 'false',
            key: 'shipping_address',
            width: 100
          },
          {
            title: '重箱出场时间',
            ellipsis: 'false',
            key: 'bind_time',
            width: 180
          },
          {
            title: '磅单编号',
            ellipsis: 'false',
            key: 'pound_no',
            width: 100
          },
          {
            title: '毛重',
            ellipsis: 'false',
            key: 'gross_weight',
            width: 100
          },
          {
            title: '皮重',
            ellipsis: 'false',
            key: 'tare_weight',
            width: 100
          },
          {
            title: '净重',
            ellipsis: 'false',
            key: 'net_weight',
            width: 100
          },
          {
            title: '毛重时间',
            ellipsis: 'false',
            key: 'gross_weight_time',
            width: 150
          },
          {
            title: '皮重时间',
            ellipsis: 'false',
            key: 'tare_weight_time',
            width: 150
          },
          {
            title: '上传磅单时间',
            ellipsis: 'false',
            key: 'upload_pound_time',
            width: 150
          },
          {
            title: '门卫确认时间',
            ellipsis: 'false',
            key: 'guard_confirm_time',
            width: 150
          },
          {
            title: '自动绑箱',
            ellipsis: 'false',
            width: 100,
            render: (h, params) => {
              const isAuto = parseInt(params.row.is_auto)
              if (isAuto === 0) {
                return h('div', '否')
              }
              if (isAuto === 1) {
                return h('div', '是')
              }
            }
          }
        ]
      }
    },
    computed: {
      ...mapGetters(['currentUser'])
    },
    methods: {
      handleSearch (param) {
        param.pageSize = param.pageSize =
          getOrderLiquidation(param).then(res => {
            // console.log(this.searchForm + ' --- searchForm')
            if (res.data.isSuccess === 1) {
              this.main_order_list = res.data.data.list
              this.pageTotal = res.data.data.total
            }
          })
      },
      remove (index) {
        this.video_list.splice(index, 1)
      },
      setInitPage (page) {
        this.pageindex = page
        const param = this.searchForm
        param.page = page
        param.pageSize = 10
        getOrderLiquidation(param).then(res => {
          if (res.data.isSuccess === 1) {
            this.main_order_list = res.data.data.list
            this.pageTotal = res.data.data.total
          }
        })
      },
      exportDataInventory () {
        let param = this.searchForm
        param.page = 1
        param.pageSize = 100000
        getOrderLiquidation(param).then(res => {
          if (res.data.isSuccess === 1) {
            let resDate = res.data.data.list
            // let resColumns = JSON.parse(JSON.stringify(this.stationColumn))
            let result = this.fasetJson(resDate)
            exportUtil.export2Excel('业务报表', result.columns, result.data)
          }
        })
      },
      fasetJson (tabData) {
        let result = {
          columns: [
            { title: '联运单号', key: 'main_order_no' },
            { title: '子单号', key: 'order_no' },
            { title: '货票号', key: 'waybill_no' },
            { title: '箱号字母', key: 'container_no_head' },
            { title: '集装箱号', key: 'container_no_body' },
            { title: '发货人', key: 'shipper' },
            { title: '收货人', key: 'receiver' },
            { title: '货物名称', key: 'product_name' },
            { title: '联运状态', key: 'status' },
            { title: '发站', key: 'start_station_name' },
            { title: '到站', key: 'end_station_name' },
            { title: '发站时间', key: 'start_station_time' },
            { title: '到站时间', key: 'end_station_time' },
            { title: '车皮号', key: 'train_number' },
            { title: '矿发吨数', key: 'send_weight' },
            { title: '车队名称', key: 'fleet_name' },
            { title: '司机名称', key: 'driver_name' },
            { title: '车牌号', key: 'truck_plate' },
            { title: '送货地址', key: 'shipping_address' },
            { title: '重箱出场时间', key: 'bind_time' },
            { title: '磅单编号', key: 'pound_no' },
            { title: '毛重', key: 'gross_weight' },
            { title: '皮重', key: 'tare_weight' },
            { title: '净重', key: 'net_weight' },
            { title: '毛重时间', key: 'gross_weight_time' },
            { title: '皮重时间', key: 'tare_weight_time' },
            { title: '上传磅单时间', key: 'upload_pound_time' },
            { title: '门卫确认时间', key: 'guard_confirm_time' },
            { title: '自动绑箱', key: 'is_auto' }
          ],
          data: []
        }
        let indexCount = 0
        tabData.forEach((item) => {
          if (item.is_auto === 0) {
            item.is_auto = '否'
          }
          if (item.is_auto === 1) {
            item.is_auto = '是'
          }
          if (item.status === 1) {
            item.status = '空车入线'
          }
          if (item.status === 2) {
            item.status = '重车出线'
          }
          if (item.status === 3) {
            item.status = '待运输'
          }
          if (item.status === 4) {
            item.status = '运输中'
          }
          if (item.status === 5) {
            item.status = '配送中'
          }
          if (item.status === 6) {
            item.status = '运单完成'
          }
          let dataItem = {
            main_order_no: item.main_order_no,
            order_no: item.order_no,
            waybill_no: item.waybill_no,
            container_no_head: item.container_no_head,
            container_no_body: item.container_no_body,
            shipper: item.shipper,
            receiver: item.receiver,
            product_name: item.product_name,
            status: item.status,
            start_station_name: item.start_station_name,
            end_station_name: item.end_station_name,
            start_station_time: item.start_station_time,
            end_station_time: item.end_station_time,
            train_number: item.train_number,
            send_weight: item.send_weight,
            fleet_name: item.fleet_name,
            driver_name: item.driver_name,
            truck_plate: item.truck_plate,
            shipping_address: item.shipping_address,
            bind_time: item.bind_time,
            pound_no: item.pound_no,
            gross_weight: item.gross_weight,
            tare_weight: item.tare_weight,
            net_weight: item.net_weight,
            gross_weight_time: item.gross_weight_time,
            tare_weight_time: item.tare_weight_time,
            upload_pound_time: item.upload_pound_time,
            guard_confirm_time: item.guard_confirm_time,
            is_auto: item.is_auto
          }
          result.data.push(dataItem)
          indexCount++
        })
        console.log(indexCount)
        return result
      }
    },
    mounted () {
      const vue = this
      this.list_loadding = true
      setTimeout(function () {
        vue.list_loadding = false
      }, 2000)
      this.setInitPage(1)
    },
    components: {}
  }
</script>
<style scoped>

</style>
